-
Notifications
You must be signed in to change notification settings - Fork 355
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(toolbar): adds color variant #10284
Conversation
Preview: https://patternfly-react-pr-10284.surge.sh A11y report: https://patternfly-react-pr-10284-a11y.surge.sh |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! Left a couple of questions, only blocker might be that we should update id="toolbar-"
.
<Checkbox | ||
label="Secondary" | ||
isChecked={isSecondary} | ||
onChange={(_event, checked) => setisSecondary(checked)} | ||
id="isSecondaryCheckbox" | ||
/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we add the ability to see all of the variants? Looks like the way it is now toggles between secondary and primary, which we should at least call out that it's secondary when checked, and primary when unchecked, which is different from the default (no value for colorVariant
). Seems like it might be more clear if we showed primary, secondary, and no-background.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I thought of that but followed the drawer model, which has a no-background modifier but only showed an example for secondary - and also I didn't know how to make a dropdown work lol. Maybe I can pair program with someone to do that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would say it may be nice to see all the color variants. We could lay them out individually instead of with a dropdown since there's only 3 (similar to how we show Alert or Label), but if we want to go the dropdown route feel free to ping me and I can help out. @srambach
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@sarah, we should probably update the Drawer example as well. I agree that we should show all variants.
|
||
return ( | ||
<React.Fragment> | ||
<Toolbar id="toolbar-" colorVariant={isSecondary ? 'secondary' : 'primary'}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<Toolbar id="toolbar-" colorVariant={isSecondary ? 'secondary' : 'primary'}> | |
<Toolbar id="toolbar-color-variant" colorVariant={isSecondary ? 'secondary' : 'primary'}> |
@@ -50,6 +50,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps | |||
ouiaId?: number | string; | |||
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ | |||
ouiaSafe?: boolean; | |||
/** Color variant of the toolbar */ | |||
colorVariant?: 'no-background' | 'primary' | 'secondary'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Question for react-dev - should we have a default
which will unset colorVariant
? Without a colorVariant
set, the toolbar background can be dynamic depending on how it's used. By default, a toolbar's background is transparent (same as colorVariant="no-background"
) except when it's sticky, then it's the primary background (same as colorVariant="primary"
)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would usually lean towards having the "default" case be where a user would leave out the colorVariant
prop entirely, and only apply the colors if the prop is present. But we've done both ways in different areas, so either works.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did a quick search to see what we do with other color variant props. It looks like the Drawer has a color variant that has a default
option. So I would lean towards adding one here as well for consistency.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm! my other questions aren't blockers
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good Sarah! I responded to a couple of threads in your PR.
<Toolbar id="toolbar-color-variant" colorVariant={isSecondary ? 'secondary' : 'primary'}> | ||
<ToolbarContent> | ||
<ToolbarItem> | ||
<SearchInput aria-label="Items example search input" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just to give this a unique name:
<SearchInput aria-label="Items example search input" /> | |
<SearchInput aria-label="With secondary color example search input" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Your changes have been released in:
Thanks for your contribution! 🎉 |
What: Closes #10226
Additional issues: Followup to patternfly/patternfly#6490